<template>
	<div class="myPage" style="position: relative;">
		<div class="container"
			style="flex: 1;z-index: 2;background: #f3f3f3;flex-direction: column;height: 100%;display: flex;justify-content: start;">

			<div style="position: relative;">
				<div style="position: absolute;width: 100%;height: 100%;background-color: white;z-index: -1;">

				</div>
				<fui-nav-bar fontWeight="bold" style="" background="transparent" color="#000" :title="subName"
					@rightClick="rightClick">
					<div
						style="border: 1px solid #eeeeee;background: white;border-radius: 32rpx;padding: 6rpx;display: flex;flex-direction: row;width: 200rpx;justify-content: space-around;">
						<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="leftClick" color="black"
							name="arrowleft"></fui-icon>
						<div class="link-column" style=""></div>
						<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="gotoHome" color="black"
							name="home"></fui-icon>
					</div>
					<template v-slot:right>

					</template>
				</fui-nav-bar>

				<div style="padding: 16rpx;display: flex;align-items: flex-start;">
					<div style="flex: 1;display: flex;flex-wrap: wrap;">
						<!-- 					<fui-dropdown-menu style="flex: 1;" :isCheckbox="false" selectedColor="#FF2B2B" splitLine
							:options="options" ref="ddmTag" direction="down" @click="tagItemClick" @close="tagClose">
							<view style="box-shadow: 0 0 10px rgb(89 102 122 / 10%) !important;"
								class="fui-select fui-flex__between" @tap="tagTap">
								<text style="margin-right: 16rpx;">{{tag}}</text>
								<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
									<fui-icon name="turningdown" :size="32"></fui-icon>
								</view>
							</view>
						</fui-dropdown-menu> -->
						<MyDropdownMenu :value="selectYearName" @onSelect="onReqYearSelect" ref="reqYearSelect"
							:tittle="selectYearName" :options="options2"></MyDropdownMenu>
						<MyDropdownMenu :value="selectClassName" @onSelect="onReqClassSelect" ref="reqClassSelect"
							:tittle="selectClassName" :options="classList"></MyDropdownMenu>
						<MyDropdownMenu :value="selectSemesterName" @onSelect="onReqSemesterSelect"
							:tittle="selectSemesterName" :options="semesterList">
						</MyDropdownMenu>

					</div>

					<fui-bubble-box height="64rpx" :right="100" style="margin-left: 16rpx;height: 64rpx;" :items="items"
						direction="bottom" position="absolute" :show="show" @click="itemClick" @close="onClose">
						<fui-button @click="bubble" background="#eeeeee" color="#f7f7f7" height="64rpx" width="80rpx"
							radius="96rpx" style="box-sizing: border-box;">
							<fui-icon size="42" name="menu"></fui-icon>
						</fui-button>
					</fui-bubble-box>
				</div>

				<div style="padding:8rpx 16rpx;">
					<fui-segmented-control activeColor="orange" color="black" type="text" :values="values"
						@click="onReqSexChange"></fui-segmented-control>
				</div>

			</div>
			<div
				style="display: flex;align-items: flex-end;padding: 16rpx 32rpx;background: white;margin-top: 16rpx;justify-content: center;">
				<div style="font-size: 36rpx;">已测：</div>
				<div style="font-size: 32rpx;">{{stuCount}}/{{stuCount}}</div>
			</div>

			<div @click="gotoStuInfo(item)"
				style="margin: 16rpx 8rpx;padding: 16rpx;background-color: white;display: flex;align-items: center;border-radius: 16rpx;"
				v-for="(item,index) in studentList">
				<image style="width: 64rpx;height: 64rpx;margin-right: 8rpx;"
					:src="item.sex==1?'../../static/icon/boy.png':'../../static/icon/girl.png'"></image>
				<div>
					<div style="margin-left: 16rpx;font-size: 36rpx;font-weight: 600;">姓名：{{item.name}}</div>
					<div style="margin-left: 16rpx;font-size: 28rpx;">学号：{{item.stuNo}}</div>
				</div>
				<div style="flex: 1;"></div>
				<fui-icon size="46" name="arrowright"></fui-icon>
			</div>

			<div style="flex: 1;overflow-y: scroll;margin-top: 8rpx;">

				<div style="">
					<div style="padding:8rpx 16rpx;" v-for="(item,index) in studentWithSubScoreList">
						<fui-list-cell style="border-radius: 16rpx;"
							v-if="item.subItemList==null || item.subItemList.length==0"
							@click="onItemClick(item,0,item.topSubItemRes)" :highlight="true">
							<view
								style="display: flex;align-items: center;padding: 16rpx 16rpx;flex-direction: row;width: 100%;">
								<div style="flex: 4;display: flex;align-items: center;">
									<image style="width: 64rpx;height: 64rpx;margin-right: 8rpx;"
										:src="item.sex==1?'../../static/icon/boy.png':'../../static/icon/girl.png'">
									</image>
									<div>
										<div style="margin-left: 16rpx;font-size: 36rpx;font-weight: 600;">
											姓名：{{item.name}}</div>
										<div style="margin-left: 16rpx;font-size: 28rpx;">学号：{{item.stuNo}}</div>
									</div>
								</div>

								<div v-if="item.subId!=-1" style="flex: 2;display: flex;align-items: center;">
									<div v-if="item.topSubItemRes" style="flex: 1;text-align: center;">
										{{item.topSubItemRes.finalScore!=null?item.topSubItemRes.finalScore.rawScore + " " + item.topSubItemRes.unit:'--'}}
									</div>
									<div style="width: 2rpx;background: #333333;margin: 0rpx 16rpx;height: 30rpx;">
									</div>
									<div style="flex: 1;text-align: center;display: flex;align-items: center;">
										<div style="flex: 1;display: flex;justify-content: center;">
											<div
											 v-if="item.topSubItemRes" 
												style="background: limegreen;color: white;border-radius: 8rpx;width: max-content;padding: 0rpx 8rpx;">
												{{item.topSubItemRes.finalScore!=null?item.topSubItemRes.finalScore.conversionScore:'--'}}
											</div>
										</div>
										<fui-icon style="color: #333333;" size="42" @click="leftClick" color="black"
											name="arrowright"></fui-icon>
									</div>
								</div>

								<div v-if="item.subId==-1" style="flex: 2;display: flex;">

									<div style="flex: 1;text-align: center;display: flex;align-items: center;">
										<div style="flex: 1;display: flex;justify-content: flex-end;">
											<div>选科</div>
										</div>
										<fui-icon style="color: #333333;" size="42" @click="leftClick" color="black"
											name="arrowright"></fui-icon>
									</div>
								</div>
							</view>
						</fui-list-cell>

						<fui-collapse-item v-else style="margin: 0rpx;border-bottom: #eeeeee solid 1rpx;">
							<div style="display: flex;flex-direction: row;align-items: center;padding: 0rpx;">
								<view
									style="display: flex;align-items: center;padding: 16rpx 16rpx;flex-direction: row;width: 100%;">
									<div style="flex: 3;display: flex;align-items: center;">
										<image style="width: 64rpx;height: 64rpx;margin-right: 8rpx;"
											:src="item.sex==1?'../../static/icon/boy.png':'../../static/icon/girl.png'">
										</image>
										<div>
											<div style="margin-left: 16rpx;font-size: 36rpx;font-weight: 600;">
												姓名：{{item.name}}</div>
											<div style="margin-left: 16rpx;font-size: 28rpx;">学号：{{item.stuNo}}</div>
										</div>
									</div>
									<div v-if="false">
										<div v-if="item.subId!=-1" style="flex: 2;display: flex;">
											<div style="flex: 1;text-align: center;">200</div>
											<div
												style="width: 2rpx;background: #333333;min-height: 40%;margin: 0rpx 16rpx;">
											</div>
											<div style="flex: 1;text-align: center;display: flex;align-items: center;">
												<div style="flex: 1;display: flex;justify-content: center;">
													<div
														style="background: limegreen;color: white;border-radius: 8rpx;width: max-content;padding: 0rpx 8rpx;">
														1.2</div>
												</div>

											</div>
										</div>

										<div v-if="item.subId==-1" style="flex: 2;display: flex;">
											<div style="flex: 1;text-align: center;display: flex;align-items: center;">
												<div style="flex: 1;display: flex;justify-content: flex-end;">
													<div>选科</div>
												</div>
												<fui-icon style="color: #333333;" size="42" @click="leftClick"
													color="black" name="arrowright"></fui-icon>
											</div>
										</div>

									</div>
								</view>
							</div>

							<template v-slot:content>
								<div
									style="border-radius: 16rpx;display: flex;flex-direction: row;padding: 8rpx 32rpx;align-items: center;background-color: #f3f3f3;margin: 0rpx 16rpx;">
									<sapn style="flex: 3;">子项名</sapn>
									<sapn style="flex: 1;">操作</sapn>
								</div>
								<div @click.stop="onItemClick(item,item2.itemNo,item2)"
									v-for="(item2,index2) in item.subItemList"
									style="display: flex;flex-direction: row;align-items: center;background-color: white;padding: 0rpx;height: 72rpx;padding: 4rpx 32rpx;">
									<view
										style="height: 80rpx;display: flex;align-items: center;padding: 0rpx 16rpx;flex-direction: row;width: 100%;">
										<div style="flex: 3;">{{item2.name}}</div>

										<div style="flex: 2;display: flex;align-items: center;">
											<div style="flex: 1;text-align: center;">
												{{item2.finalScore!=null?item2.finalScore.rawScore + " " + item2.unit:'--'}}
											</div>
											<div
												style="width: 2rpx;background: #333333;margin: 0rpx 16rpx;height: 30rpx;">
											</div>
											<div style="flex: 1;text-align: center;display: flex;align-items: center;">
												<div style="flex: 1;display: flex;justify-content: center;">
													<div
														style="background: limegreen;color: white;border-radius: 8rpx;width: max-content;padding: 0rpx 8rpx;">
														{{item2.finalScore!=null?item2.finalScore.conversionScore:'--'}}
													</div>
												</div>
												<fui-icon style="color: #333333;" size="42" @click="leftClick"
													color="black" name="arrowright"></fui-icon>
											</div>

											
										</div>
									</view>
								</div>
							</template>
						</fui-collapse-item>
					</div>
				</div>

			</div>


			<!-- <div style="position: absolute;width: 100%;bottom: 0rpx;">
				<div style="width: 100%;height: 80rpx;background-color: white;text-align: center;display: flex;align-items: center;justify-content: center;">ss</div>
				<fui-digital-keyboard style="display: block !important;position: relative;" :show="true"
					:background="background" :decimal="true" spareKey="取消" :theme="theme" @click="keyClick"
					@confirm="confirm" @backspace="backspace" @spare="spare"></fui-digital-keyboard>
				<fui-safe-area></fui-safe-area>
			</div> -->
		</div>
	</div>
	
	<U-MyKeyboard @confirm="onKeyConfirm" @close="closeKeyBoard" :subItem="selectSubItem" :show="showKey"></U-MyKeyboard>
	

	<!-- <fui-picker linkage title="请选择年级" :layer="1" :options="options2" :show="showSelectYear" @change="change"
		@cancel="onShowSelectYearCancel"></fui-picker>

	<fui-picker linkage title="请选择班级" :layer="1" :options="addClassList" :show="showSelectClass" @change="classChange"
		@cancel="onShowSelectYearCancel"></fui-picker> -->
</template>

<script>
	import request from "/request/request.js"
	export default {
		data() {
			return {
				values: [{
					id: null,
					name: '全部'
				}, {
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				showAddClass: false,
				showSelectClass: false,
				total: 0,
				current: 1,
				show: false,
				showDialog: false,
				classList: [],

				selectYear: null,
				tag: '不限',
				tagShow: false,
				options2: [{
					text: '七年级',
					value: 1,
					src: ''
				}, {
					text: '八年级',
					value: 2,
					src: '',
				}, {
					text: '九年级',
					value: 3,
					src: ''
				}],
				semesterList: [{
					text: '当前学期',
					value: null,
				}, {
					text: '七年级上学期（第一学期）',
					value: 1,
					checked: true
				}, {
					text: '七年级下学期（第二学期）',
					value: 2
				}, {
					text: '八年级上学期（第三学期）',
					value: 3
				}, {
					text: '八年级下学期（第四学期）',
					value: 4
				}, {
					text: '九年级上学期（第五学期）',
					value: 5
				}, {
					text: '九年级下学期（第六学期）',
					value: 6
				}],

				showSelectYear: false,
				items: [
					// {
					// 	text: '添加学生',
					// 	src: '/static/images/common/logo.png'
					// }
				],
				show: false,
				studentList: [],
				selectReqClass: {},
				selectReqSex: {},
				selectReqSemester: {},
				stuCount: 0,

				subName: '',
				subId: null,
				year: null,
				selectYearName: '',
				selectClassName: '',
				selectSemesterName: '',
				studentWithSubScoreList: [],
				selectSubItem:{},
				showKey:false,
				electiveSubId:null,
				stuId:null,
			}
		},
		onLoad(option) {
			console.log(option);
			this.getAllClass();
			this.subName = option.subName;
			this.subId = option.subId;
			this.selectYear = option.year;
			this.classId = option.classId;
			this.semester = option.semester;
			for (var i = 0; i < this.options2.length; i++) {
				console.log(this.options2[i].value);
				if (this.options2[i].value == this.selectYear) {
					this.selectYearName = this.options2[i].text;
				}
			}



			for (var i = 0; i < this.semesterList.length; i++) {
				console.log(this.semesterList[i].value);
				if (this.semesterList[i].value == this.semester) {
					this.selectSemesterName = this.semesterList[i].text;
				}
			}

			if (this.semester == 'null') {
				this.selectSemesterName = "当前学期"
			}

			// setTimeout(() => {
			// 	this.$refs.reqYearSelect.reset();
			// }, 500)
		},

		methods: {
			onItemClick(electiveSub,itemNo,subItem) {
				this.selectSubItem = subItem;
				this.electiveSub = electiveSub;
				this.electiveSubId = electiveSub.electiveSubId;
				this.electiveSub.itemNo = itemNo;
				this.stuId = electiveSub.id;
				console.log(JSON.stringify(electiveSub));
				if (electiveSub.subId == -1) {
					this.showSelectSub(electiveSub.type);
				} else {
					
					this.showKey = true;
				}
			
			},
			gotoExamDetail() {
				uni.navigateTo({
					url: "/pages/examDetailManage/examDetailManage"
				})
			},
			leftClick() {
				uni.navigateBack();
			},
			gotoHome() {
				getApp().gotoHome();
			},
			showTest() {
				this.show = true;
			},
			onReqYearSelect(e) {
				console.log(e);
				this.selectYear = e.value;
				this.getAllClass();
				this.$refs.reqClassSelect.reset();
			},
			onReqClassSelect(e) {
				console.log(e);
				this.selectReqClass = e;
				this.getAllExamSubByClass();
			},
			onReqSemesterSelect(e) {
				console.log(e);
				this.selectReqSemester = e;
				this.semester = e.value;
				this.getAllExamSubByClass();
			},
			getAllClass() {
				let that = this;
				request({
					url: `/class/getAllClass`,
					method: 'POST',
					data: {
						current: that.current,
						grade: that.selectYear
					}
				}).then((res) => {
					that.classList = [];
					if (res.data.records.length == 0) {
						that.classList = [{
							text: ""
						}, ];
						return;
					}
					for (var i = 0; i < res.data.records.length; i++) {
						let obj = {
							text: res.data.records[i].className,
							value: res.data.records[i].id,
						}
						that.classList.push(obj);
					}
					for (var i = 0; i < that.classList.length; i++) {
						if (that.classList[i].value == that.classId) {
							that.selectClassName = that.classList[i].text;
						}
					}
					that.getAllExamSubByClass();
				}, (err) => {
					console.log('fail' + err);
				});
			},
			tagTap() {
				this.$refs.ddmTag.show()
				this.tagShow = true;
			},
			tagItemClick(e) {
				console.log(e)
				this.tag = e.text;
				this.selectYear = e.value;
				this.tagClose();
				this.getAllClass();
			},
			tagClose() {
				this.tagShow = false;
			},
			//显示气泡框
			bubble() {
				this.show = true
			},
			//气泡框item点击事件
			itemClick(e) {
				console.log(e)
				if (e.index == 0) {
					this.showAddClass = true;
				}
				this.onClose()
			},
			//隐藏气泡框
			onClose() {
				this.show = false
			},

			onShowSelectYearCancel(e) {
				this.showSelectYear = false
				this.showSelectClass = false;
			},
			change(e) {
				let that = this;
				this.showSelectYear = false;
				this.addStudentClass = {};

				this.addStudentYear = e;
				console.log(e);
				request({
					url: `/class/getAllClass`,
					method: 'POST',
					data: {
						grade: this.addStudentYear.value
					}
				}).then((res) => {
					that.addClassList = [];
					if (res.data.records.length == 0) {
						that.addClassList = [{
							text: ""
						}, ];
						return;
					}
					for (var i = 0; i < res.data.records.length; i++) {
						let obj = {
							text: res.data.records[i].className,
							value: res.data.records[i].id,
						}
						that.addClassList.push(obj);
					}
					console.log(res);
				}, (err) => {
					console.log('fail' + err);
				});
			},
			getAllExamSubByClass() {
				console.log("getAllExamSubByClass");
				let that = this;
				request({
					url: `/examDetail/getAllExamDetailByClassId`,
					method: 'POST',
					data: {
						subId: that.subId,
						year: that.selectYear,
						classId: that.classId,
						semester: that.semester
					}
				}).then((res) => {
					if (res.code == 0) {
						console.log(res);
						that.studentWithSubScoreList = res.data.studentWithSubScoreResList;
					} else {
						that.studentWithSubScoreList = [];
					}

				}, (err) => {
					console.log('fail' + err);
				});
			},
			onKeyConfirm(e) {
				let that = this;
				this.showKey = false;
				console.log("onKeyConfirm");
				console.log(e);
				request({
					url: `/score/updateScore`,
					method: 'POST',
					data: {
						count: e.count,
						score: e.value,
						itemNo: that.electiveSub.itemNo,
						stuId: that.stuId,
						electiveId: that.electiveSubId
					}
				}).then((res) => {
					console.log(res);
					that.getAllExamSubByClass();
				}, (err) => {
					console.log('fail' + err);
				});
			},
			closeKeyBoard() {
				this.showKey = false;
			},
		}
	}
</script>

<style scoped>
	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}

	.fui-list__cell {
		width: 100%;
	}

	.fui-select {
		flex: 1;
		height: 80rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.fui-select::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 200%;
		height: 200%;

		transform: scale(.5);
		transform-origin: 0 0;
		pointer-events: none;
	}

	.fui-flex__center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fui-flex__between {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>